<template>
  <div class="common">
    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="myform">
      <el-form-item label="手机号码" prop="mobile">
        <el-input v-model="form.mobile"></el-input>
      </el-form-item>
      <el-form-item label="登录密码" prop="password">
        <el-input type="password" v-model="form.password" show-password></el-input>
      </el-form-item>
      <!-- <el-link type="danger" class="zhuce">点击注册</el-link> -->
      <el-form-item>
        <el-button type="primary" class="width100" @click="longToDo">立即登录</el-button>
      </el-form-item>
    </el-form>

    <el-dialog title="请拖动滑块到指定位置" :visible.sync="dialogVisible" width="380px" :center="true">
      <slide-verify
        :l="42"
        :r="10"
        :w="310"
        :h="155"
        @success="onSuccess"
        @fail="onFail"
        @refresh="onRefresh"
        :slider-text="text"
        style="margin:auto"
        ref="slideblock"
      ></slide-verify>
      <div>{{msg}}</div>
    </el-dialog>
  </div>
</template>

<script>
import { signinAjax } from "@/api";
import { bus } from "@/utils/bus";
export default {
  name: "common",
  data() {
    return {
      msg: "",
      text: "向右滑",
      accuracy: 1,
      form: { mobile: "" },
      dialogVisible: false,
      rules: {
        // 表单校验   正则
        mobile: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              var mobileReg = /^1(3|5|6|7|8|9)\d{9}$/;
              if (mobileReg.test(value)) {
                callback();
              } else {
                callback(new Error("请输入正确的手机号"));
              }
            },
            trigger: "change",
          },
        ],
        password: [
          //失去焦点触发
          { required: true, message: "请输入登录密码", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              var passReg = /^[A-Za-z0-9]\w{3,12}$/;
              if (value.length < 4) {
                callback(new Error("密码长度至少4位"));
              } else if (value.length > 12) {
                callback(new Error("密码长度最多12位"));
              } else if (!passReg.test(value)) {
                callback(new Error("请输入正确格式的密码"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    onSuccess(times) {
      console.log("验证通过");
      this.$message.success("验证成功，正在跳转...");
      setTimeout(() => {
        this.$router.push({ name: "index" });
      }, 1000);
    },
    onFail() {
      console.log("验证不通过");
      this.msg = "";
    },
    onRefresh() {
      console.log("点击了刷新小图标");
      this.msg = "";
    },
    onFulfilled() {
      console.log("刷新成功啦！");
    },
    onAgain() {
      console.log("检测到非人为操作的哦！");
      this.msg = "try again";
      // 刷新
      this.$refs.slideblock.reset();
    },
    longToDo() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          signinAjax(this.form)
            .then((res) => {
              if (res.type) {
                sessionStorage.setItem("token", res.token);
                localStorage.setItem("mobile", this.form.mobile);
                // console.log(this.form);

                this.dialogVisible = true;
              }
            })
            .catch((err) => {});
        } else {
          // console.log("error");
          return false;
        }
      });
    },
  },
  mounted() {
    if (localStorage.getItem("mobile")) {
      this.form.mobile = localStorage.getItem("mobile");
    }
  },
};
</script>






<style lang="scss" scoped>
.myform {
  padding-right: 50px;
  padding-top: 20px;
}
.width100 {
  width: 100%;
}
.zhuce {
  float: right;
  padding-bottom: 10px;
}
#slideVerify {
  left: 50px;
}
.slide-verify-slider {
  margin-top: none;
}
#slideVerify[data-v-9c239bcc] {
  left: 0;
}
</style>